<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="./css/login.css">
</head>

<body>
    <div class="top">
        <img src="./img/5927bb314ed4a.gif" alt="">
        <img src="./img/split1.png" alt="">
        <span>东大门美购</span>
    </div>
    <div class="center">
        <div class="left">
            <p>由于系统更新，老用户请使用邮箱验证，初次登录<br>点击这里验证,<a href="./red.html">→去验证</a></p>
        </div>
        <div class="right">
            <p class="text1">欢迎登录</p>
            <form action="">
                <input type="text" placeholder="  用户名/邮箱" id="eamil"><br>
                <input type="password" placeholder="  密码(8-32个字符)" id="password"><br>
                <input type="text" placeholder="  不区分大小写" id="ver">
                <span id="ver1">1 2 3 4</span><br>
                <input type="checkbox" class="check" checked> 记住用户名<br>
                <input type="submit" value="登录" id="sub"><br>
                <span class="ten">
                    使用合作账号登录:
                    <img src="./img/未标题21.png" alt="">
                    <img src="./img/未标题-1.png" alt="">
                </span>
                <div class="enroll">
                    <span>没有账号？</span>
                    <a href="./xieyi.html">免费注册</a>
                </div>
            </form>
        </div>
    </div>
    <div class="bottom">
        <p><a href="./article.html">《东大门美购服务条款、隐私政策》</a> | <a href="#">常见问题？</a><br>
            Copyright © 2016-2025 东大门美购网-批发代购 版权所有 保留一切权利 备案号:辽ICP备15011384号-1</p>
    </div>
</body>
<script src="./libs/jquery.js"></script>
<script>
    // 生成验证码
    // 四位数字的随机验证码
    // 范围随机数
    function random(max, min) {
        return Math.round(Math.random() * (max - min) + min);
    }

    // 随机4位数字的验证码
    function randomNumber() {
        var str = "";
        for (var i = 0; i < 4; i++) {
            str += random(0, 9);
        }
        return str;
    }

    const cc = randomNumber();

    $("#ver1").html(cc);

    $("#sub").click(function () {
        if ($("#ver").val() !== cc) {
            alert("验证码不对");
            return false;
        }
        // 发起ajax请求，将表单中的用户信息提交给后端
        $.ajax({
            url: "http://localhost:3000/api",
            type: "post",
            data: {
                type: "login",
                username: $("#eamil").val(),
                password: $("#password").val()
            },
            success: res => {
                // 请求成功后，解析数据，根据后端提示，添加不同的交互功能
                res = JSON.parse(res);
                // console.log(res);
                if (res.code === 1) {

                    // 将登录成功的状态存储到本地存储
                    localStorage.setItem("token", "ok");
                    localStorage.setItem("username", res.data.username);

                    if (confirm("登录成功，是否跳转到首页")) {
                        location.assign("http://localhost:3000/index.html");
                        // ...
                    }
                } else if (res.code === 2) {
                    alert(res.title);
                    $("#password").val("");
                    $("#password")[0].focus();
                } else if (res.code === 3) {
                    if (confirm("登录失败，" + res.title + "是否去注册")) {
                        location.assign("http://localhost:3000/red.html");
                        registerTab();
                    }
                }
            }
        })
        return false;
    })
</script>

</html>